import React, {useEffect, useRef, useState} from "react";

/**
 * useRef：
 *     1. useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。
 *     2. 返回的 ref 对象在组件的整个生命周期内保持不变。
 *
 * 特性：
 *     1. 如果你将 ref 对象以 <div ref={myRef} /> 形式传入组件，则无论该节点如何改变，
 *     React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点。
 *     2. useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。
 *     3. useRef 会在每次渲染时返回同一个 ref 对象。
 *
 * 注意：
 *     1. 当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。
 *     2. 想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。
 *     https://react.docschina.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
 *
 */
export function HookTest7() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
        // `current` 指向已挂载到 DOM 上的文本输入元素
        inputEl.current.focus();
    };

    return (
        <>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </>
    );
}
